<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台首页管理</title>
    <script src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>

        .el-header {
            /* 顶部部分的高度(默认60px) */
            background-color: rgb(143, 143, 189);
            color: #FFFFFF;
            font-size: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 36px;
        }


        .el-mian {
            background-color: #eaedf1;
            padding: 0px;
            margin: 0px;
            height:calc(100vh - 40px);
        }


        :root {
            --border-color: #d9d9d9;
            --primary-gradient: linear-gradient(180deg, #a1fcf0, #11aa95);
            --active-primary-gradient: linear-gradient(180deg, #c6ffdd, #69d192);
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
            color: #FFFFFF;
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
            color: #FFFFFF;
            background: var(--active-primary-gradient);
            z-index: 999;
        }

        .el-tabs--border-card>.el-tabs__header {
            position: relative;
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item {
            color: #FFFFFF;
            margin: 0 30px;
            background: var(--primary-gradient);
            border: none;
            height: 28px;
            line-height: 28px;
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child {
            margin-left: 22px;
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item::before,
        .el-tabs--border-card>.el-tabs__header .el-tabs__item::after {
            content: "";
            height: 100%;
            position: absolute;
            background: var(--primary-gradient);
            border-radius: 8px 8px 0 0;
            width: 30px;
            top: 0;
            transition: all .3s cubic-bezier(.645, .045, .355, 1);
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item::before {
            right: -16px;
            transform: skew(-25deg);
            border-radius: 0 0 8px 0;
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item::after {
            transform: skew(25deg);
            left: -16px;
            border-radius: 0 0 0 8px;
            border-left: 1px solid var(--border-color);
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active::before,
        .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active::after {
            background: var(--active-primary-gradient);
            transition: all .3s cubic-bezier(.645, .045, .355, 1);
            z-index: 999;
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active::before {
            border-right: 1px solid var(--border-color);
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active::after {
            border-left: 1px solid var(--border-color);
        }

    </style>
</head>
<body>
    <div  id="app">
        <el-container>
            <el-header class="el-header">
                <!-- 应用名称 -->
                <span>医院管理系统</span>
                <span>{{ currentTime }}</span>
                <a @click="logOut">退出</a>
            </el-header>
            <el-container >
  <!--              <el-aside width="200px">
                    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-aside>-->
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            default-active="1-4-1"
                            class="el-menu-vertical-demo"

                            :collapse-transition="false"
                            background-color="#123456"
                            text-color="#fff"

                            active-text-color="#ffd04b">
                        <el-submenu :index="item.id.toString()" v-for="(item ,index) in data" :key="index">
                            <template slot="title">
                                <i class="el-icon-caret-bottom"></i>
                                <span>{{item.label}}</span>
                            </template>
                            <el-menu-item :index="submenu.id.toString()" v-for="(submenu,index) in item.children"
                                          :key="index">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title"><a style="color: white;text-decoration: none"
                                                      @click="handleNodeClick(submenu,url,submenu,label)">{{submenu.label}}</a></span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main class="el-mian">
                        <!--标签页-->
                        <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
                            <!--标签页的内容-->
                            <el-tab-pane
                                    v-for="(item, index) in editableTabs"
                                    :key="item.name"
                                    :label="item.title"
                                    :name="item.name"
                            >
                               <!-- {{item.content}}-->
                                <!--html 标签 可以是http地址，能把请求地址获取到的资源显示到浏览器上-->
                                <iframe :src="item.url" width="100%" frameborder="0" height="800px;"></iframe>
                            </el-tab-pane>
                        </el-tabs>

                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>



    </div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
               data:[],//树数据
               defaultProps: { //树数据父子组件传参
                    children: 'children',
                    label: 'label'
               },
                //标签叶相关树形
                editableTabsValue: '1',
                editableTabs: [{
                    title: '可视化统计视图',
                    name: '1',
                    //content: 'Tab 1 content'
                    url: '/html/homepage.html'
                }  ],
                tabIndex: 1,
                currentTime: '',
            }
        },
        created(){
            // 初始化 currentTime
            this.currentTime = new Date().toLocaleString().replace(/\//g, "-");
           // 每秒更新一次 currentTime
            setInterval(() => {
                this.currentTime = new Date().toLocaleString().replace(/\//g, "-");
            }, 1000);
            //初始化
            //定义一个变量，赋值为当前vue对象
            var _this = this;
            //使用axios向后台发请求，获取数据
            //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
            axios.get(//请求方式，必须和后端资源暴露方式一致
                '/menu/queryTreeDataByUserId')//请求携带的参数
                .then(function (response) {//成功响应的处理方法   response 是响应的数据
                    console.log(response);
                    //response 一定是json对象  stringify 把json对象转json字符串
                    //alert(JSON.stringify(response));
                    //判断返回是否正确
                    if(response.data.code==200){
                        //直接使用this 代表axios的对象  this
                        _this.data=response.data.data;
                    }

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods:{
            //点击树节点事件
            handleNodeClick(data) {
                console.log(data);
                //判断url是否为空
                if(data.url!=null&&data.url!='null'&&data.url!=''&&data.url!=undefined){
                    //调用添加标签页方法  把要请求的url地址和标签名 传递进去
                    this.addTab(data.url,data.label);
                }
            },
            //用户退出
            logOut(){
                //定义一个变量，赋值为当前vue对象
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.get(//请求方式，必须和后端资源暴露方式一致
                    '/sysuser/logOut',//请求的url
                    )//请求携带的参数
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        // alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            location.href="/html/login.html"
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            //添加标签页
            addTab(url,label) {
                //每次添加新的标签页时   标签页的下标+1
                let newTabName = ++this.tabIndex + '';
                //定义是否已经标签变量
                var  isHaveTab = false;
                //定义变量等于循环数组
                let tabs = this.editableTabs;
                //循环所有页签页
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(label === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        //已经存在label
                        isHaveTab = true;
                        newTabName =tab.name;
                    }
                });
                //isHaveTab  集合中没有的时候，添加
                if(!isHaveTab){
                    //向循环数组中添加一个对象
                    this.editableTabs.push({
                        title:  label,
                        name: newTabName,
                        // content: 'New Tab content',
                        url:url
                    });
                }
                //正在编辑的标签页的值   这个值是几，那个标签页就高亮
                this.editableTabsValue = newTabName;
            },
            //移除标签页
            removeTab(targetName) {
                //定义变量等于循环数组
                let tabs = this.editableTabs;
                //获取高亮标签页的值
                let activeName = this.editableTabsValue;
                // 判断高亮标签页的值是否等于当前打开的标签页的名称   ===  既比较类型，还比较值  ==  只比较值
                if (activeName === targetName) {
                    //循环
                    tabs.forEach((tab, index) => {
                        //再次判断当前循环标签页对象的名称是否等于  当前打开的标签页的名称
                        if (tab.name === targetName) {
                            //定义变量下一个标签页
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            //如果nextTab有值
                            if (nextTab) {
                                //要高亮的标签页的名称
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                //正在编辑的标签页的值   这个值是几，那个标签页就高亮
                this.editableTabsValue = activeName;
                //过滤，过滤后赋值给原来的循环数组
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    })
</script>
</body>
</html>